<template>
    <div class="content">
        <div class="header-content">
            <el-button type="primary" size="mini" @click="handleButton('send-confirm')">确认发送</el-button>
            <el-button type="danger" size="mini" @click="handleButton('delete')"> 删除</el-button>
        </div>
        <div class="noOpened">
            <RiskTableP
                ref="risk-table-rule-record"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :column="tableColumns"
                :paging="paging"
                @page-change="getTableData"
            >
            </RiskTableP>
        </div>
    </div>
</template>
<script lang="ts">
import { PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { changeOptions, dateFormat, timeFormat } from '@/utils/tools';
import { Component, Vue } from 'vue-property-decorator';
import WarningNotice from './../dict/warning-notice';
import API from '../api/warning-notice';
import RiskTableP from '@/common/components/risk-table-plus.vue';
import * as moment from 'moment';

@Component({ name: 'RuleSendRecord', components: { RiskTableP } })
export default class RuleSendRecord extends Vue {
    Dict = new WarningNotice();
    tableColumns: any = [
        {
            type: 'checkbox',
            selectedAll: false,
            fixed: 'left',
            align: 'center',
            width: 50,
        },
        {
            title: '发送编号',
            field: 'recordId',
            minWidth: 90,
        },
        {
            title: '发送时间点',
            field: 'startTime',
            minWidth: 130,
            render: (value, row) => timeFormat(value, false, 'HH:mm', 'HHmm') || '--',
        },
        {
            title: '规则编码',
            field: 'ruleId',
            minWidth: 90,
        },
        {
            title: '规则名称',
            field: 'ruleName',
            minWidth: 90,
        },
        {
            title: '模板类型',
            field: 'noticeType',
            minWidth: 100,
            render: value => this.Dict.noticeTypePojo[value],
        },

        {
            title: '接收角色',
            field: 'notifierName',
            minWidth: 90,
        },
        {
            title: '接收用户',
            field: 'noticeUserName',
            minWidth: 90,
        },
        {
            title: '发送状态',
            field: 'sendStatus',
            minWidth: 90,
            render: value => this.Dict.sendStatusPojo[value],
        },
    ];

    requestTableMethodName: any = API.ruleSendRecord;

    tableConfig: TableConfigVO = {
        rowKey: 'recordId',
    };
    tableData: any[] = [
        {
            recordId: '1221',
            startTime: '1252',
        },
    ];

    paging: PageVO = {
        total: 0,
        pageSize: 10,
        currentPage: 1,
    };

    tableLoading: boolean = false;

    mounted() {
        this.getTableData();
    }

    /**
     * 操作行
     */
    async handleButton(type) {
        if (type == 'send-confirm' || type == 'delete') {
            let name = '';
            let requestName;
            if (type == 'send-confirm') {
                name = '确认发送';
                requestName = API.recordSendEmail;
            } else if (type == 'delete') {
                name = '删除';
                requestName = API.sendDelete;
            }
            let checkedRows = (this.$refs['risk-table-rule-record'] as VueObject).checkedRows || [];
            if (checkedRows.length < 1) {
                this.yh_message_warn(`请先勾选需${name}的数据！`);
                return;
            }
            let params = {};
            if (type == 'delete') {
                params = { recordIds: checkedRows.map(item => item.recordId) };
                requestName(params)
                    .then(() => {
                        this.yh_message_success(name + '成功');
                        this.getTableData();
                    })
                    .finally(() => {
                        // 清除导出时列表勾选项
                        this.$nextTick(() => {
                            (this.$refs['risk-table-rule-record'] as any).resetCheckRowKeys();
                        });
                    });
            } else {
                // 确认发送
                checkedRows = checkedRows.filter(item => item.sendStatus == '0');

                if (!checkedRows.length) {
                    this.yh_message_warn('请勾选发送状态为"待发送"的邮件进行确认发送！');
                    return;
                }
                params = {
                    recordEmailRequests: checkedRows.map(item => {
                        return { recordId: item.recordId, noticeType: item.noticeType };
                    }),
                    type: '1', // 定义1为确认发送  2为再发送 不一定用到？？
                };
                requestName(params)
                    .then(() => {
                        this.yh_message_success(name + '成功');
                        this.getTableData();
                    })
                    .finally(() => {
                        // 清除导出时列表勾选项
                        this.$nextTick(() => {
                            (this.$refs['risk-table-rule-record'] as any).resetCheckRowKeys();
                        });
                    });
            }
        }
    }

    /**
     * 表格数据
     */
    getTableData() {
        this.tableLoading = true;
        let row: any = this.$attrs.record as any;
        return new Promise((resolve, reject) => {
            this.requestTableMethodName({
                ruleId: row.ruleId,
                noticeType: row.noticeType,
                paging: this.paging,
            })
                .then((res: any) => {
                    this.tableData = res.list || [];
                    this.paging.total = res.total || 0;
                    this.tableLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.tableLoading = false;
                    reject(err);
                });
        });
    }
}
</script>
<style lang="scss" scoped>
.header-content {
    margin-bottom: 10px;
}
.noOpened /deep/ .vxe-table {
    .vxe-table--body-wrapper.body--wrapper {
        height: calc(60vh - 180px) !important;
    }
}
</style>
